<template>
	<view class="container">
		<view class="navFixed">
			<!-- 这个地方是状态栏高度 -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<!-- 这个地方是导航栏高度 按钮文字胶囊部分 -->
			<view class="navContent" :style="{ height: navBarHeight + 'px', width: searchBoxWidth + 'px' }">
				<view class="title">
					<image src="../../static/tabbar/icon.png" mode="" style="width: 18px;height: 18px;"></image> <text>车辆管理</text>
					
				</view>
				</view>
		</view>
		<view :style="{ paddingTop: statusBarHeight + navBarHeight + 'px' }" class="wrap">
			
			<view class="content">
				<view class="base-info">
				
					<view class="tips">
						<view>基础信息</view>
						<view class="divider"></view>
					</view>
					<!-- 司机图片 -->
					<view class="driver-info-item">
						<text>	<text style="vertical-align: top;">头像 ：</text> </text>		
					<image style="width: 64px;height: 64px;" src="@/static/tabbar/mine_tn.png" mode="aspectFit"></image>	</view>
					<!-- 司机名称 -->
					<view class="driver-info-item">
						<text><text>姓名：</text> {{ driverInfo.nickName  }}</text>
					</view>
					<!-- 手机 -->
					<view class="driver-info-item">
						<text><text>手机：</text>{{ driverInfo.telephone  || '---' }} </text>
					</view>
					<!-- 住址 -->
					<view class="driver-info-item">
						<text><text>住址：</text>{{ driverInfo.address || '---' }} </text>
					</view>
				</view>
				<view class="driver-info">
					<view class="tips">
						<view>驾驶信息</view>
					<view class="divider"></view>
					</view>
				   <!-- 评分 -->
				   <view class="driver-info-item">
					   <text><text>驾驶证</text>：{{ driverInfo.driverLicense || '---' }} </text>
				   </view>
					<!-- 司机性别 -->
				   <!-- <view class="driver-info-item">
						<text><text>性别</text>：{{ driverInfo.gender || '---' }}</text>
					</view> -->
					<!-- 驾驶类型 -->
					<view class="driver-info-item">
						<text><text>驾驶类型</text>：{{ driverInfo.driverType == 0 ? '外接驾驶员' : '自有驾驶员' || '---' }} </text>
					</view>
				   <!-- 司机驾龄 -->
				   <view class="driver-info-item">
					   <text><text>驾驶状态</text>：{{ driverInfo.driverStatus ==0? '正常' : '休息' || '---' }} </text>
				   </view>
				 
				</view>
				<view class="upload-imge">
					<view class="tips">
						<view>上传图片 </view>
						<view class="divider"></view>
					</view>
					<view class="upload-imge-item">
					  <!--  <text>
							<text>证件照</text>
							：
						</text> -->
						<view v-if="Identification.length >0 && !edit" >
							<view class="item-pho " v-for="item in Identification">
								<!-- <u-image :src="config.baseUrl+'/' + item.filePath"></u-image> -->
								 <u-image
									:showLoading="true"
									:src="config.baseUrl+'/' + item.filePath"
									width="80px"
									height="80px"
									@click="click"
								  ></u-image> 
								  <view class="mask" @click="editPho"> 
								  <u-icon name="edit-pen"></u-icon>
								   <text>点击修改</text>  
								  </view>
								<!-- <image :src="item"></image> -->
							</view>
							<!-- <view style="margin-top: 20px;">
								<u-button type="primary" @click="editPho" text="编辑" />
							</view> -->
						</view>
						<view v-else >
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								:maxCount="1"
							></u-upload>
						</view>
					</view>
					<!-- 导航按钮 -->
		</view>
		<view class="compareface"> <u-button type="primary" @click="gotoCompare" shape="circle" text="开始比对"></u-button></view>
			</view>
		</view>
		<u-modal :show="show"  @confirm="handleConfirm" :title="title" >
					
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
					
	   </u-modal>
				
	</view>
</template>

<script>
import { driverinfo, headerImageUploadApi } from '@/apis/driver.js'
import config from '@/config/config.js'
export default {
    data() {
        return {
			show:false,
			title:'',
			content:`空山新雨后<br>
								天气晚来秋`,
			modalUrl:'../../static/tabbar/comparing.png',
			richText:'',
			statusBarHeight: 0,
			navBarHeight: 0,
			searchBoxWidth: 0,
			config:null,
			edit:false,
			Identification:[],
			fileList1: [
			// 	{
			// 	url:'http://192.168.10.128:13456/Uploads/Driver/651600756068421.png',
			// 	status: 'success'
			// },{url:'https://b0.bdstatic.com/ugc/qy6XlSIB_vDRdZujwOl2Dgcb4c88b3dd9a2e5c9e4fec52773a7071.jpg?x-bce-process=image/auto-orient,o_1/watermark,image_NDU0ZjAyZDU5YjQ1LnBuZw==,bucket_searchbox,w_115,text_QOWkqeWPuQ==,type_RlpMYW5UaW5nSGVp,size_115,x_77,y_77,interval_4,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1@h_1280',
			// status:'error'},
			],
            driverInfo: {
                imageUrl: 'https://img2.baidu.com/it/u=3579429092,915854756&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=564',
                name: '张三',
                gender: '男',
                drivingYears: 5,
                rating: 4.8
            }
        };
    },
   async onLoad(options) {
	   const info = uni.getSystemInfoSync();
	   this.statusBarHeight = info.statusBarHeight;
	   this.searchBoxWidth = info.searchBoxWidth;
	   // #ifdef MP-WEIXIN
	   const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	   this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight);
	   this.searchBoxWidth = menuButtonInfo.left;
	   // #endif
        const res = await driverinfo(this.$store.state.ueserId)
		console.log(res);
		this.config = config
        this.driverInfo = res.driverInfo
		this.Identification = res.files
    },
    methods: {
		 handleConfirm() {
		      // 点击确定时关闭模态框
		      this.show = false;
		    },
		gotoCompare(){
			let rand  =  Math.floor(Math.random() * 3) + 1;
			console.log(rand);
			if(rand ==1) {
				this.content = `<img src="../../static/tabbar/comparing.png"  /><br><br>
						    &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 人脸对比中... `
			}else if(rand == 2) {
				this.content = `<img src="../../static/tabbar/iconright.png"  /><br><br>
							 &nbsp;&nbsp;&nbsp;&nbsp; 对比成功 `
			} else if(rand == 3) {
				this.content = `<img src="../../static/tabbar/iconerror.png"  /><br><br>
						  &nbsp; &nbsp;&nbsp;&nbsp; 对比失败`
			}
			this.show = true
		},
		editPho(){
			this.edit = !this.edit
			this.fileList1 = this.Identification.map((item)=>{
				return {
					url:this.config.baseUrl +'/'+ item.filePath,
					status:'success'
				}
			})
		},
		
        // 删除图片
        deletePic() {
            this.fileList1 = [];
        },
        // 新增图片
        async afterRead(event) {
            const file = event.file;
            if (file) {
                try {
                    this.fileList1 = [{
                        ...file,
                        status: 'uploading',
                        message: '上传中'
                    }];
                    const result = await this.uploadFilePromise(file.url);
                    this.fileList1 = [{
                        ...file,
                        status: 'success',
                        message: '',
                        url: result
                    }];
                } catch (error) {
                    console.error('文件上传失败:', error);
                    this.fileList1 = [];
                }
            }
        },
        async uploadFilePromise(url) {
            try {
				
                const result = await headerImageUploadApi({
					avatarfile: url,
					formData: {
						'File':`${url}`,
                     },
					 params:{
						   userID: this.$store.state.ueserId,
						   FieldCode: 'Driver_File',				 
					 }
                });
				 uni.showToast({
					title: '上传成功',
					icon: 'success'
				 });
		// 			uni.uploadFile({
		// 			    timeout: config.timeout || timeout,
		// 			    url: 'http://192.168.10.128:13456/api/fleet/upload',
		// 			    filePath: url,
		// 			    name: 'File',
		// 			    header: {
		// 					 'Authorization': 'Bearer ' + uni.getStorageSync('token'),
		// 					 'Content-Type' = 'multipart/form-data'
		// 				},
		// 			    formData: {
		// 					'Flie': url,
		// 					'FieldCode' : 'Driver_File'
		// 				},
		// 			    success: (response) => {
		// 			        let result;
		// 			        // try {
		// 			        //     result = JSON.parse(response.data);
		// 			        // } catch (error) {
		// 			        //     tool.toastTip('响应数据不是有效的 JSON 格式', 'none', 1500);
		// 			        //     reject(error);
		// 			        //     return;
		// 			        // }
		// 			        // const code = result.code || 200
		// 			        // const msg = result.msg
		// 					console.log('response: ',response);
		// 					if(!getToken()){ setToken(res.header.accesstoken)}
		// 					resolve(response) 
		// 			        // if (code === 200) {
		// 			        //     resolve(result)
		// 			        // } else if (code == 401) {
		// 			        //     tool.showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
		// 			        //         if (res.confirm) {
		// 			        //             uni.reLaunch({ url: '/pages/login' })
		// 			        //         }
		// 			        //     })
		// 			        //     reject('无效的会话，或者会话已过期，请重新登录。')
		// 			        // } else if (code === 500) {
		// 			        //     tool.toastTip(msg, 'none', 1500)
		// 			        //     reject('500')
		// 			        // } else if (code !== 200) {
		// 			        //     tool.toastTip(msg, 'none', 1500)
		// 			        //     reject(code)
		// 			        // }
		// 			    },
		// 			    fail: (error) => {
		// 			        let { message } = error;
		// 			        if (message === 'Network Error') {
		// 			            message = '后端接口连接异常'
		// 			        } else if (message.includes('timeout')) {
		// 			            message = '系统接口请求超时'
		// 			        } else if (message.includes('Request failed with status code')) {
		// 			            message = '系统接口' + message.substr(message.length - 3) + '异常'
		// 			        }
		// 			        tool.toastTip(message, 'none', 1500)
		// 			        reject(error)
		// 			    }
		// 			})
	 
	 
                // 假设返回结果中有一个字段存储了上传后的文件 URL
                return result.data.url; 
            } catch (error) {
                console.error('文件上传失败:', error);
                throw error;
            }
        },
        navigatorTo() {
            uni.navigateTo({
                url: '/pagesIndex/index/index'
            });
        }
    }
};
</script>

<style lang="less" scoped>

.textColor() {
    -webkit-background-clip: text;
}
.dflex() {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flexlay {
	text-align: center;
}
.container {
	width: 100%;
	height: 100%;
	font-family: Source Han Sans SC, Source Han Sans SC;
	font-weight: 400;
	font-size: 14px;
	color: #333333;
	line-height: 16px;
	text-align: left;
	font-style: normal;
	text-transform: none;
	.navFixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1030;
		width: 100%;
		background-color: #ffffff;
		.navContent {
			// .dflex();
			padding: 0 30rpx;
			height: 90rpx;
			box-sizing: border-box;
		}
	}
}
.title {
	display: flex;
	align-items: center;
	// padding-bottom: 32px;
	color: #1F3F36;
	padding-left: 5px;
	text {
		padding-left: 5px;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		// font-size: 12px;
		color: #1A3B32;
		color: #1F3F36;
		// line-height: 28px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
}
.wrap {
    width: 100%;
    height: 100%;
    .dflex();
    flex-direction: column;
    padding: 20rpx;
	margin-top: 15px;
}
.content {
    padding: 10px;
    width: 100%;
	background-color: aliceblue;
    gap: 4;
}
.driver-image {
    flex: 1;
    height: 200rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20rpx;
    image {
        width: 100%;
        height: 100%;
    }
}
.driver-info {
    flex: 1;
	.driver-info-item {
		
	}
}
.driver-info ,
.upload-imge,
.base-info {
	margin-bottom: 5px;
	border-radius: 5px;
	background: #fff;
}
.upload-imge-item {
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 10px;
}
.tips {
	font-family: Source Han Sans SC, Source Han Sans SC;
	font-weight: bold;
	font-size: 16px;
	color: #333333;
	line-height: 19px;
	padding-top: 5px;
	padding:  10px;
	text-align: left;
	font-style: normal;
	text-transform: none;
	
	> view:first-child {
		padding-bottom: 10px;
	}
	.divider {
		width: 100%;
		height: 1px;
		background: #e1e1e1;
	}

}
.ml {
    width: 100%;
    margin-left: 5%;
    image {
        object-fit: contain;
    }
}
.ml-1 {
    margin-left: 25%;
}
.item-pho {
	width: 80%;
	position: relative;
	.mask {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 80px;
		height: 80px;
		top: 0;
		left: 0;
		color: #f5f5f5;
		background-color: rgba(0, 0, 0, .2);
	}
}
.driver-info-item {
    width: 100%;
    line-height: 80rpx;
    text {
        .textColor();
        font-size: 32rpx;
        text {
            display: inline-block;
            width: 27%;
            text-align: right;
        }
		text:first-child {
			display: inline-block;
			width: 20%;
		}
    }
}
.driver-info {
	.driver-info-item {
		text:first-child {
			width: 25%;
		}
	}
}
.compareface {
	padding:10px 10%;
}
u-button {
    margin-top: 40rpx;
	}
</style>